import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 凹凸贴图
 *    用图片像素的灰度值表示几何体表面的高低深度
 *    如果模型定义了法线贴图，就没有必要使用凹凸贴图
 */
const planeGeo = new THREE.PlaneGeometry(512, 512);
const txrl = new THREE.TextureLoader();
const txr = txrl.load('../../textures/brick_diffuse.jpg');
const planeMat = new THREE.MeshPhongMaterial({
  map: txr,
  side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(planeGeo, planeMat);
mesh.translateX(-384);
scene.add(mesh);
// 加载凹凸贴图
const bumpTxr = txrl.load('../../textures/brick_bump.jpg');
const planeBumpMat = new THREE.MeshPhongMaterial({
  map: txr,
  bumpMap: bumpTxr,
  bumpScale: 30
});
const bumpMesh = new THREE.Mesh(planeGeo, planeBumpMat);
bumpMesh.translateX(384);
scene.add(bumpMesh);

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 400,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
})();
